<template>
  <div class="fixAll">
    <div class="fixhead">
      <div class="fixAddress">
        <h4>收货地址</h4>
        <div
          class="two"
          v-for="(item, index) in addrData"
          :key="index"
          @click="kk(item)"
        >
          <p>{{ item.AName }}</p>
          <p>{{ item.Phone }}</p>
          <p>
            {{ item.PName }} {{ item.CName }} {{ item.TName }} {{ item.Remark }}
          </p>
          <div class="fixicon1">
            <i class="el-icon-delete" @click="del(item.AId)"></i>
          </div>
          <div class="fixicon2">
            <i class="el-icon-edit" @click="update(item)"></i>
          </div>
        </div>

        <div class="fixjj" @click="dis">
          <i class="el-icon-circle-plus-outline"></i>
          <p style="font-size: 15px">添加新地址</p>
        </div>
      </div>

      <div class="fixgoods">
        <h4>商品</h4>
        <div class="fixg" v-for="(items, indexs) in idsData.ids" :key="indexs">
          <el-row>
            <el-col :span="3">
              <img :src="items.GImg" width="20px" height="20px" />
            </el-col>
            <el-col :span="12">{{ items.GName }}</el-col>
            <el-col :span="5">{{ items.GPrice }}元×{{ items.SNum }}</el-col>
            <el-col :span="4">{{ items.GPrice * items.SNum }}</el-col>
          </el-row>
        </div>
      </div>
      <div class="fixfang">
        <div class="fixpei"><span>配送方式</span></div>
        <div class="fixbao"><span>包邮</span></div>
      </div>
      <div class="fixfang">
        <div class="fixpei"><span>发票</span></div>
        <div class="fixbao"><span>电子发票 个人</span></div>
      </div>
      <div class="fixjin">
        <div class="fixkong"></div>
        <div class="fixyou">
          <div class="fixjian">
            <p>商品件数：</p>
            <p>商品总价：</p>
            <p>优惠活动：</p>
            <p>运费：</p>
            <p>应付金额：</p>
          </div>
          <div class="fixjian">
            <p>{{ idsData.multipleSelection }}件</p>
            <p>{{ idsData.total }}元</p>
            <p>0元</p>
            <p>0元</p>
            <p>{{ idsData.total }}元</p>
          </div>
        </div>
      </div>
      <div class="fixdi">
        <el-button type="info" style="width: 200px; height: 40px" @click="shop"
          >返回购物车</el-button
        >
        <el-button
          type="warning"
          style="width: 200px; height: 40px"
          @click="jie(aa)"
          >去结算</el-button
        >
      </div>

      <el-dialog
        title="新增确认"
        :visible.sync="dialogVisible"
        width="50%"
        :before-close="handleClose"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-input v-model="addData.AName" placeholder="姓名"></el-input>
          </el-col>
          <el-col :span="12">
            <el-input v-model="addData.Phone" placeholder="手机号"></el-input>
          </el-col> </el-row
        ><br />
        <el-row>
          <el-col :span="8">
            <el-select
              v-model="addData.PId"
              placeholder="请选择"
              @change="binds"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.PName"
                :value="item.PId"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="8">
            <el-select
              v-model="addData.CId"
              placeholder="请选择"
              @change="bindk"
            >
              <el-option
                v-for="item in optionss"
                :key="item.value"
                :label="item.PName"
                :value="item.PId"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="8">
            <el-select v-model="addData.TId" placeholder="请选择">
              <el-option
                v-for="item in optionsk"
                :key="item.value"
                :label="item.PName"
                :value="item.PId"
              >
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <br />
        <el-row>
          <el-input type="textarea" v-model="addData.Remark"></el-input>
        </el-row>
        <br />
        <el-row>
          <el-col :span="12">
            <el-input v-model="addData.You" placeholder="邮编"></el-input>
          </el-col> </el-row
        ><br />

        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="add">确 定</el-button>
        </span>
      </el-dialog>

      <el-dialog
        title="新增确认"
        :visible.sync="dialogVisibles"
        width="50%"
        :before-close="handleClose"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-input v-model="updateData.AName" placeholder="姓名"></el-input>
          </el-col>
          <el-col :span="12">
            <el-input
              v-model="updateData.Phone"
              placeholder="手机号"
            ></el-input>
          </el-col> </el-row
        ><br />
        <el-row>
          <el-col :span="8">
            <el-select
              v-model="updateData.PId"
              placeholder="请选择"
              @change="binds"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.PName"
                :value="item.PId"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="8">
            <el-select
              v-model="updateData.CId"
              placeholder="请选择"
              @change="bindk"
            >
              <el-option
                v-for="item in optionss"
                :key="item.value"
                :label="item.PName"
                :value="item.PId"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="8">
            <el-select v-model="updateData.TId" placeholder="请选择">
              <el-option
                v-for="item in optionsk"
                :key="item.value"
                :label="item.PName"
                :value="item.PId"
              >
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <br />
        <el-row>
          <el-input type="textarea" v-model="updateData.Remark"></el-input>
        </el-row>
        <br />
        <el-row>
          <el-col :span="12">
            <el-input v-model="updateData.You" placeholder="邮编"></el-input>
          </el-col> </el-row
        ><br />

        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="xiu">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      idsData: {
        ids: [],
        multipleSelection: "",
        total: "",
      },
      updateData: {
        AName: "",
        Phone: "",
        PId: "",
        CId: "",
        TId: "",
        Remark: "",
        You: "",
      },
      addrData: [],
      addData: {
        AName: "",
        Phone: "",
        PId: "",
        CId: "",
        TId: "",
        Remark: "",
        You: "",
      },
      dialogVisible: false,
      dialogVisibles: false,
      options: [],
      optionss: [],
      optionsk: [],
      OrdersData: {
        OId: "",
        UId: "",
        Info: "",
        AId: "",
      },
      aa: {
        hao:"",
        item: 0,
        zong: "",
        shopdata: []
      },
      itemss: [],
      OrderFromDto: {
        orderModel: {
          OId: 0,
          UId: 0,
          ONumber:"",
          OStatus: 0,
          Info: '',
          TotalPrice:"",
          AId:0
        },
        ordersModels: [],
      },
    };
  },
  methods: {
    jie(aa) {
      let userid = sessionStorage.getItem("userid");
      if (this.itemss.AId == 0) {
        this.OrderFromDto.orderModel.AId=this.addrData[0].AId;
      }
      else
      {
        this.OrderFromDto.orderModel.AId=this.itemss.AId;
      }
      this.OrderFromDto.orderModel.UId=userid;
      this.OrderFromDto.orderModel.TotalPrice=this.idsData.total;
      for (let index = 0; index < this.idsData.ids.length; index++) {
        let OrderFormBData = {
          RId: 0,
          ONumber: "",
          GId: 0,
          RNum: 0,
        };
        OrderFormBData.GId=this.idsData.ids[index].GId;
        OrderFormBData.RNum=this.idsData.ids[index].GNum;
        this.OrderFromDto.ordersModels.push(OrderFormBData);
      }
      console.log(this.OrderFromDto)
      this.$axios.post("http://localhost:20338/api/Shop/AddOrder",this.OrderFromDto).then((res) => {
        if (res.data.list> 0) {
           this.aa.hao = res.data.number;
          this.aa.item =this.OrderFromDto.orderModel.AId;
          this.aa.zong = this.idsData.total;
          this.aa.shopdata = this.idsData.ids;
          console.log(aa);
          this.$router.push({
            path: "/money",
            query: aa,
          });
        }
        else
        {
          this.$message.error("添加订单失败")
        }
      });
    },
    dis() {
      this.dialogVisible = true;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    show() {
      //let userid = sessionStorage.getItem("userid");
      this.$axios
        .get("http://localhost:20338/api/Shop/ShowAddressDto")
        .then((res) => {
          this.addrData = res.data;
        });
    },
    add() {
      this.dialogVisible = false;
      this.$axios
        .post("http://localhost:20338/api/Shop/AddCity", this.addData)
        .then((res) => {
          if (res.data > 0) {
            this.$message.success("添加成功");
            this.show();
          } else {
            this.$message.error("添加失败");
          }
        });
    },
    del(id) {
      this.$confirm("此操作将永久删除该购物内容, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .get("http://localhost:20338/api/Shop/DelAddress?id=" + id)
            .then((res) => {
              if (res.data > 0) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.show();
              } else {
                this.$message({
                  type: "error",
                  message: "删除失败!",
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    bind() {
      this.$axios
        .get("http://localhost:20338/api/Shop/BindCity?id=0")
        .then((res) => {
          this.options = res.data;
        });
    },
    binds() {
      this.$axios
        .get("http://localhost:20338/api/Shop/BindCity?id=" + this.updateData.PId)
        .then((res) => {
          this.optionss = res.data;
        });
    },
    bindk() {
      this.$axios
        .get("http://localhost:20338/api/Shop/BindCity?id=" + this.updateData.CId)
        .then((res) => {
          this.optionsk = res.data;
        });
    },
    shop() {
      this.$router.push("/car");
    },
    kk(item) {
      this.itemss = item;
      console.log(this.itemss);
    },
    update(item) {
      this.dialogVisibles = true;
      this.$axios.get('http://localhost:20338/api/Shop/Fan?id='+item.AId).then(res=>{
        this.updateData=res.data;
      })
       this.bind();
       this.binds();
       this.bindk();
    },
    xiu() {
      this.$axios
        .post("http://localhost:20338/api/Shop/Update", this.updateData)
        .then((res) => {
          if (res.data > 0) {
            this.$message.success("修改成功");
            this.dialogVisibles = false;
            this.show();
          } else {
            this.$message.error("修改失败");
          }
        });
    },
    //OId: "",
        // UId: "",
        // SId: "",
        // Info: "",
        // AId: "",
    // jie(aa) {
    //   this.OrdersData.OId=this.idsData.ids.OId;
    //   let userid = sessionStorage.getItem("userid");
    //   this.OrdersData.UId=userid;
    //   this.OrdersData.Info=this.itemss.AName;
    //   this.OrdersData.AId=this.itemss.AId;
    //   if (this.OrdersData.AId == "") {
    //         alert("请选择收货地址");
    //         return;
    //       }
    //   this.$axios.post("http://localhost:20338/api/Shop/AddOrder",this.OrdersData).then((res) => {
    //     if (res.data > 0) {
    //       this.aa.item = this.itemss.AId;
    //       this.aa.zong = this.idsData.total;
    //       this.aa.shopdata = this.idsData.ids;
    //       this.$router.push({
    //         path: "/money",
    //         query: aa,
    //       });
    //     }
    //     else
    //     {
    //       this.$message.error("添加订单失败")
    //     }
    //   });
    // },
    
    
  },
  created() {
    this.idsData = this.$route.query;
    this.show();
    this.bind();
  },
};
</script>

<style scoped>
.two {
  border: 1px solid rgb(216, 10, 10);
  width: 270px;
  height: 200px;
  margin-right: 20px;
  float: left;
}
.fixjj {
  border: 1px solid rgb(214, 203, 203);
  width: 270px;
  height: 130px;
  margin-right: 20px;
  text-align: center;
  float: left;
  padding-top: 70px;
}
.fixAll {
  background-color: #ccc;
  border: 1px solid;
  width: 100%;
  height: 100%;
}
.fixhead {
  width: 1000px;
  height: 1000px;
  background-color: white;
  margin: auto;
}
.fixAddress {
  text-align: left;
  width: 1000px;
}
.fixicon1 {
  margin-left: 10px;
  font-size: 30px;
  margin-top: 30px;
}
.fixicon2 {
  margin-left: 220px;
  font-size: 30px;
  margin-top: -30px;
}
.fixgoods {
  width: 1000px;
  text-align: left;
  margin-top: 250px;
}
.fixg {
  width: 1000px;
}
.fixfang {
  width: 1000px;
  height: 50px;
}
.fixpei {
  float: left;
  font-size: 25px;
  font-weight: 800;
  width: 200px;
  text-align: left;
}
.fixbao {
  color: orange;
  text-align: left;
}
.fixjin {
  width: 1000px;
}
.fixkong {
  width: 700px;
  height: 280px;
  float: left;
}
.fixyou {
  width: 300px;
  height: 280px;
  margin-left: 700px;
}
.fixjian {
  width: 140px;
  height: 280px;
  float: left;
  text-align: right;
}
.fixdi {
  width: 1000px;
  text-align: right;
}
</style>